<template>
  <el-form-item v-for="item in FormList" :label="item.label">
    <el-input
      v-if="item.type == 'input'"
      v-model="modelValue[item.prop]"
      placeholder="请输入"
      clearable
    ></el-input>
    <Selector
      v-if="item.type == 'select' && !item.customList"
      v-model="modelValue[item.prop]"
      :category="item.category"
    />
    <el-select
      v-if="item.type == 'select' && item.customList"
      v-model="modelValue[item.prop]"
      placeholder="请选择"
    >
      <el-option
        v-for="custom in item.customList"
        :label="custom.label"
        :value="custom.value"
      ></el-option>
    </el-select>
  </el-form-item>
</template>

<script setup name="MyFormItem">
import { computed } from 'vue';
const emit = defineEmits(['update:modelValue']);
const props = defineProps({
  FormList: {
    default: []
  },
  modelValue: {
    default: {}
  }
});
const modelValue = computed({
  get: () => {
    return props.modelValue;
  },
  set: n => {
    emit('update:modelValue', n);
  }
});
</script>

<style lang="scss" scoped></style>
